<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>菜单管理</title>
    <link rel="stylesheet" href="css/common.css">
    <link rel="stylesheet" href="css/zTreeStyle.css">
    <link rel="stylesheet" href="css/menuTree.css">
    <script src="js/jquery.js"></script>
    <script src="js/jquery.ztree.all.min.js"></script>
</head>
<body>
<div class="treeL">
    <ul id="treeDemo" class="ztree"></ul>
</div>
<div class="treeR">
    <form>
        <table cellpadding="0" cellspacing="0">
            <tr>
                <td>上级目录：</td>
                <td>
                    <div>
                        <input type="text">
                    </div>
                </td>
            </tr>
            <tr>
                <td>模块名称：</td>
                <td>
                    <div>
                        <input type="text">
                    </div>
                </td>
            </tr>
            <tr>
                <td>模块链接：</td>
                <td>
                    <div>
                        <input type="text">
                    </div>
                </td>
            </tr>
            <tr>
                <td>模块图元：</td>
                <td>
                    <div>
                        <input type="text">
                    </div>
                </td>
            </tr>
            <tr>
                <td>排序：</td>
                <td>
                    <div>
                        <input type="text">
                    </div>
                </td>
            </tr>
            <tr>
                <td>类别：</td>
                <td>
                    <div>
                        <select>
                            <option value="">目录</option>
                            <option value="">目录1</option>
                            <option value="">目录2</option>
                            <option value="">目录3</option>
                            <option value="">目录4</option>
                        </select>
                    </div>
                </td>
            </tr>
            <tr>
                <td>备注：</td>
                <td>
                    <div>
                        <input type="text">
                    </div>
                </td>
            </tr>
        </table>
        <div class="buttonBox">
            <button type="submit" class="addBtn">增加</button>
            <button type="submit" class="updataBtn">修改</button>
            <button type="submit" class="delBtn">删除</button>
        </div>
    </form>
</div>
</body>
</html>
<script>
    var setting = {
        data: {
            simpleData: {
                enable: true
            }
        },
        async: {
            enable: true,
            url: "/TestZTree/test",
            autoParam: ["id", "name", "level"],
            otherParam: {"otherParam": "zTreeAsyncTest"},
            //dataType:"json",//返回数据类型
            dataFilter: filter//异步返回后经过filter
        },
        callback: {
            //beforeAsync: zTreeBeforeAsync,// 异步加载事件之前得到相应信息
            asyncSuccess: zTreeOnAsyncSuccess,//异步加载成功的fun
            asyncError: zTreeOnAsyncError,   //加载错误的fun
            beforeClick: beforeClick //捕获单击节点之前的事件回调函数
        },
        view:{

        }
    };
    function filter(treeId, parentNode, childNodes) {
        if (!childNodes) return null;
        for (var i = 0, l = childNodes.length; i < l; i++) {
            childNodes[i].name = childNodes[i].name.replace(/\.n/g, '.');
        }
        return childNodes;
    }

    function beforeClick(treeId, treeNode) {
        if (!treeNode.isParent) {
            alert("请选择父节点");
            return false;
        } else {
            return true;
        }
    }



    function zTreeOnAsyncError(event, treeId, treeNode) {
        alert("异步加载失败!");
    }

    function zTreeOnAsyncSuccess(event, treeId, treeNode, msg) {
        console.log("异步加载成功！")
    }


    var zNodes = [
        {id: 1, pId: 0, name: "工程管理", isParent: true},
        {id: 11, pId: 1, name: "储备工程", isParent: true},
        {id: 12, pId: 1, name: "正式工程", isParent: true},
        {id: 13, pId: 1, name: "工程管理", isParent: true},
        {id: 111, pId: 11, name: "工程新建"},
        {id: 112, pId: 11, name: "设计下发"},
        {id: 113, pId: 11, name: "第三个"},
        {id: 2, pId: 0, name: "借用工程", isParent: true},
        {id: 3, pId: 0, name: "工程借料", isParent: true},
        {id: 4, pId: 0, name: "设计变更", isParent: true},
        {id: 5, pId: 0, name: "报表中心", isParent: true}
    ];

    $(document).ready(function () {
        $.fn.zTree.init($("#treeDemo"), setting, zNodes);
    });


    //input框选中
    $("input").focus(function () {
        $(this).addClass("input-active")
    }).blur(function () {
        $(this).removeClass("input-active")
    })


</script>